<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <style>
        div{width: 200px;height: 200px;border-width: 10px; border-style: solid;}
    </style>
</head>
<body>
    <div class="dv1"></div>
    <script>
        /*  1. 函数定义:  将特定功能的代码封装在一起，方便调用及维护
            2. 函数的封装(声明)： function 函数名(){}
                    - 此时只是多个了功能工具，并没有真正被使用
            3. 函数的调用：  函数名()
            4. 函数的形参与实参
                - 形参（变量）：函数声明时
                - 实参（值）：函数调用时
            5. 函数的返回值: 通过return
                - 函数调用后，一定会得到函数的返回值
        */
        function getRandomColor(xishu){
            let randomRed = parseInt(Math.random() * xishu)  
            let randomGreen = parseInt(Math.random() * xishu)  
            let randomBlue = parseInt(Math.random() * xishu) 
            let randomColor = `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`
            return randomColor
        }

        let res = getRandomColor(256)
        document.querySelector('.dv1').style.backgroundColor = res



        /* 字符串模板：一定要用反引号``
            - 字符串里面的变量可以直接用 ${变量名} 来占位 */

    </script>
</body>
</html>